<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影院信息页面</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="/sign/js/sign.js"></script>
    <style>
        body {
            background-image: url('https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1;
        }
        .cinema-container {
            display: flex;
            flex-wrap: wrap;
            gap: 70px;
            padding-left: 42px;
            padding-top: 25px;
        }
        .cinema {
            width: 300px;
            height: 300px;
            cursor: pointer;
            position: relative;
        }
        .cinema .img{
            display: block;
            width: 100%;
            height: 260px;
        }
        .cinema p{
            display: flex;
            justify-content: center;
            color: #dddddd;
        }
        .auditorium-info {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            background-color: white;
            border: 1px solid #ddd;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            width: calc(100% - 22px);
            z-index: 1000;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s, transform 0.3s;
        }
        .cinema:hover .auditorium-info,
        .cinema.active .auditorium-info {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        .el-pagination {
            background-color: transparent !important; /* 使用 !important 确保覆盖默认样式 */
            /* 其他可能需要的样式，比如边框等 */
            border: none; /* 如果需要移除边框 */
        }
    </style>
</head>
<body>
<div id="app">
<el-header class="title">
    <div class="c900 flex">
        <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>
        <nav>
            <el-link href="index.html" class="center" :underline="false" style="background-color: #99f7">首页</el-link>
            <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>
            <el-link class="center" :underline="false">电影院</el-link>
            <el-link class="center" :underline="false">优惠活动</el-link>
        </nav>
        <el-input style="width: auto" placeholder="请输入电影,影院,活动">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <div class="flex">
            <sign ref="a" style="display: flex; gap: 10px">
                <template #nologin>
                    <el-link href="register.html">注册</el-link>
                    <el-button type="text" >忘记密码</el-button>
                    <el-link href="login.html">登录</el-link>
                </template>
                <template #logined="props">
                    <!--                            <el-avatar :src="$refs.a.myinfo.head"></el-avatar>-->
                    <el-avatar :src="props.myinfo.head"></el-avatar>
                    <el-link href="/sign/logout">退出</el-link>
                </template>
            </sign>
        </div>
    </div>
</el-header>
<div id="d1">
    <div class="cinema-container">
        <div v-for="item in studios" class="cinema" onclick="toggleAuditoriumInfo(this)">
            <img :src="item.image" class="img">
            <p>{{item.name}}</p>
            <div class="auditorium-info">
                <div v-for="hall in item.halls">
                    <h3>{{hall.name}}</h3>
                    <ul>
                        <template v-if="hall.schedules && hall.schedules.length > 0">
                            <li v-for="s in hall.schedules" :key="s.id">
                                {{ s.start }} - {{ s.end }} 《{{ s.movie.name }}》
                            </li>
                        </template>
                        <li v-else>该影厅暂无排片</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex;justify-content: center;">
        <el-pagination class="el-pagination"
                       layout="prev, pager, next"
                       :page-size="size"
                       :current-page="current"
                       @current-change="changeCurrent"
                       :total="total">
        </el-pagination>
    </div>
</div>
</div>
<script>
    function toggleAuditoriumInfo(cinemaElement) {
        const auditoriumInfo = cinemaElement.querySelector('.auditorium-info');
        auditoriumInfo.style.display = auditoriumInfo.style.display === 'block' ? 'none' : 'block';
    }
</script>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            size:10,
            current:1,
            studios:[],
            total:0
        },
        methods:{
            query(){
                axios.get(`studios/queryStu?current=${this.current}&size=${this.size}`).then(res=>{
                    this.studios = res.data;
                    this.total = res.data[0].total;
                    console.log(this.studios);
                });
            },
            changeCurrent(newPage){
                this.current = newPage;
                this.query();
            }
        },
        created(){
            this.query();
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .price{
        font-size: .8em;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 50% 50%;
        padding: 5px;
    }
    .price>span{
        display: flex;
        justify-content: start;
        align-items: center;
    }
    small{
        font-size: .4em;
    }
    .el-icon-search{
        color: #666;
    }
</style>
</body>
</html>